<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板列表</title>
		<link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/elementui.css" />
		<script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			.el-col {
			    border-radius: 4px;
			}
			
			.grid-content {
			    border-radius: 4px;
			    min-height: 36px;
			}
			
			.el-scrollbar__wrap {
			    overflow-x: hidden;
			}
			
			.el-cascader-menu {
			    overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-col :span='24'><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row>
				<el-col :span='2'><div class="grid-content bg-purple"></div></el-col>
				<el-col :span='20'>
					<el-form :inline="true" :model="searchForm" class="demo-form-inline">
						<el-form-item label="模板名">
							<el-input v-model="searchForm.name" placeholder="模板名" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="findList">查询</el-button>
							<el-button type="success" @click="dialogFormVisible=true,template={}">添加</el-button>
						</el-form-item>
					</el-form>
					<el-table :data="templateList" border style="width: 100%">
						<el-table-column prop="name" label="名称" width="180">
						</el-table-column>
						<el-table-column prop="specNum" label="规格数量" width="180">
						</el-table-column>
						<el-table-column prop="paraNum" label="参数数量" width="180">
						</el-table-column>
						<el-table-column label="设置" width="180">
							<template slot-scope="scope">
								<el-link type="primary" :href="'spec.html?id='+scope.row.id">规格列表</el-link>
								<el-link type="primary" :href="'para.html?id='+scope.row.id">参数列表</el-link>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="180">
							<template slot-scope="scope">
								<el-link type="primary" @click="edit(scope.row.id)">编辑</el-link>
								<el-link type="primary" @click="del(scope.row.id)">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="findList" @current-change="findList" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
					 :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-col>
				<el-col :span='2'><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			

			<!-- 弹窗编辑和添加 -->
			<el-dialog title="模板保存" :visible.sync="dialogFormVisible">
				<el-form :model="template">
					<el-form-item label="模板id" label-width="100px">
						<el-input v-model="template.id" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="模板名称" label-width="100px">
						<el-input v-model="template.name" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</div>
			</el-dialog>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					templateList: [],
					searchForm: {},
					currentPage: 1,
					size: 10,
					total: 0,
					template: {},
					dialogFormVisible: false
				},
				created() {
					this.findList()
				},
				methods: {
					findList() {
						let searchForm = new URLSearchParams(this.searchForm).toString()
						axios.post(`/api/template/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, searchForm)
							.then((response) => {
								this.templateList = response.data.records
								this.size = response.data.size
								this.total = response.data.total
							}).catch((error) => {
								this.$message.error(error.msg)
							})
					},
					edit(id) {
						axios.post(`/api/template/findbyid.do?id=${id}`).then((response) => {
							this.template = response.data
							this.dialogFormVisible=true
						}).catch((error) => {
							this.$message.error(error.msg)
						})
					},
					del(id) {
						this.$confirm("你真的确认需要删除该数据?","删除提示").then(() => {
							axios.post(`/api/template/deletebyid.do?id=${id}`).then((resp) => {
								this.$message.success(resp.data.msg)
								this.findList()
							}).catch((error) => {
								this.$message.error(error.msg)
							})	
						}).catch((error)=>{
							this.$message.error("执行失败，重试或练习管理员")
						})
					},
					save() {
						let id = this.template.id;
						let action = id==null?'save':'update'
						axios.post(`/api/template/${action}.do`,this.template).then((resp)=>{
							this.$message.info(resp.data.msg);
							this.dialogFormVisible=false
							this.findList()
						})
					}
				}
			})
		</script>
	</body>
</html>
